<template>
  <div id="question">
    <el-dialog :flag='hints'
               :title='quesprompt'
               :width='450'
               :dialogClose='determine'>
      <div slot="content" class="hintContent">{{hintsContent}}</div>
      <div slot="options"><button @click="determine('hints')">{{$t('user.api.determine')}}</button></div>
    </el-dialog>
    <ul>
      <li class="chios" v-if="marketSide === 'exQue'">
        <p><span class="itemTitle">{{$t('myAdd.otc_order.questionType')}}</span><span class="symb">*</span></p>
        <template>
          <inline-input :property = "quetlaun" v-model = "quetlaun.value"></inline-input>
        </template>
        <p><span class="itemTitle">{{$t('myAdd.otc_order.description')}}</span><span class="symb">*</span></p>
      </li>
      <li>
        <div class="warrel">
          <textarea name="" id="" cols="30" rows="10" ref="textInp" v-model="content"></textarea>
        </div>
      </li>
      <li>
        <div class="userTip">
          {{$t('myAdd.otc_order.aboutOrderWarn20')}}
        </div>
      </li>
      <li class="clearfix">
        <div class="upfile" v-show="imgSrc">
          <img :src="imgSrc" alt="">
        </div>
        <div class="upfile clearfix">
          <div>
            <input type="file"  @change="fileChange($event)"
              accept="image/png, image/jpeg, image/jpg"
              name="file"
              ref="fileInp">
            <span class="camera">
              <i class="icon-camera"></i>
              <p class="upload_text">{{$t('user.questions.upload')}}</p>
              <p class="limit_text">{{$t('myAdd.questions.lessThenOne')}}</p>
            </span>
          </div>
        </div>
      </li>
      <li class="cameraTip"><i>{{mation}}</i></li>
    </ul>
    <p class="lastTip">{{$t('myAdd.questions.warnTip1')}}</p>
    <div class="btn">
      <button :class='{readOnly: uploading || !flag}' @click="submit" >{{$t('user.questions.button')}}</button>
    </div>
  </div>
</template>

<script>
import InlineInput from '@/components/common/inlineInput'
import elDialog from '@/components/common/addCommon/dialog'
export default {
  name: 'question',
  props: ['marketSide', 'sequence'],  // 这个'marketSide': 'exQue' /  'otcAppeal'
  components: { InlineInput, elDialog },
  data () {
    return {
      hints: false,
      quesprompt: this.$t('user.questions.ques_prompt'),
      content: '',            // 内容
      mation: this.$t('user.questions.Prompt'),  // 图片错误提示
      imgSrc: null,
      uploading: false,
      ladObj: {
        rqType: null,
        rqDescribe: null,
        imageDataStr: null
      },
      quetlaun: {},
      flag: true,
      codes: '',
      hintsContent: ''  // 弹框显示内容
    }
  },
  computed: {
    quetlaun_obj () {
      return {
        formType: 'select',
        name: 'select',
        value: '',
        placeholder: this.$t('user.questions.pro_type'),
        optionList: ''
      }
    }
  },
  mounted () {
    // 场外申诉的问题类型是 7
    this._P.fixUrl('code') && (this.codes = this._P.fixUrl('code'))
    this.quetlaun = this.quetlaun_obj
    if (this.codes) {
      this.quetlaun.value = 7
    }
    if (this.marketSide === 'exQue') {
      this.tip_list()
    } else if (this.marketSide === 'otcAppeal') {
      this.quetlaun.value = 7
    }
  },
  watch: {
    'quetlaun_obj' (val) {
      this.quetlaun = val
    },
    '$store.state.baseData._lan' (val) {
      if (this.marketSide === 'exQue') {
        this.tip_list()
      }
      this.mation = this.$t('user.questions.Prompt')
    }
  },
  methods: {
    determine () {
      this.hints = false
    },
    // 上传图片
    fileChange (e) {
      let fileSize = e.target.files[0].size / 1024 / 1024
      if (fileSize <= 5) {
        const reader = new FileReader()
        reader.readAsDataURL(this.$refs.fileInp.files[0])
        reader.onload = (e) => {
          this.uploading = true
          this.$store.dispatch('setTipState', this.$t('personal.uploadIn'))
          this.upload(reader)
          this.imgSrc = reader.result
        }
      } else {
        this.mation = this.$t('user.questions.Prompt')
      }
    },
    upload (file) {
      if (file) {
        let _from = new FormData()
        _from.append('file', this.$refs.fileInp.files[0], this.$refs.fileInp.files[0].name)
        let isOpenUploadImg = this.$store.state.baseData._data.is_open_upload_img || '0'
        this.axios({
          url: this.$store.state.url.common.upload_img,
          hostType: (isOpenUploadImg === '1') ? 'upload' : null,
          headers: {'Content-Type': 'multipart/form-data'},
          params: _from,
          method: 'post'
        }).then(res => {
          this.uploading = false
          if (res.code === '0') {
            if (res.data.filenameStr) {
              this.ladObj.imageDataStr = res.data.filenameStr
            } else {
              this.ladObj.imageDataStr = res.data.filename
            }
            this.$store.dispatch('setTipState', this.$t('user.questions.upload_success'))
          } else {
            this.$store.dispatch('setTipState', {text: this.$t('error.' + res.code), type: 'error'})
          }
        })
      }
    },
    // 提交
    submit () {
      if (this.uploading) {
        return false
      }
      // 问题类型
      let res = this.quetlaun.value
      if (res === null) {
        this.hints = true
        this.hintsContent = this.$t('user.questions.pro_type')
      } else {
        this.ladObj.rqType = res
      }
      // 问题描述
      let val = this.$refs.textInp.value
      if (val === '') {
        this.hints = true
        this.hintsContent = this.$t('user.questions.pro_describe')
        this.ladObj.rqDescribe = null
        return false
      } else {
        this.ladObj.rqDescribe = val
      }
      // 问题凭证
      if (!this.ladObj.imageDataStr) {
        this.hints = true
        this.hintsContent = this.$t('myAdd.questions.warnTip2')
      }
      if (this.marketSide === 'otcAppeal') {
        this.$set(this.ladObj, 'sequence', this.sequence)
      }
      if (val !== '' && res !== null && this.ladObj.imageDataStr !== null) {
        if (!this.flag) return false
        this.flag = false
        this.axios({
          url: this.$store.state.url.personal.create_problem,
          headers: {},
          params: this.ladObj,
          method: 'post'
        }).then((data) => {
          if (data.code === '0') {
            this.$store.dispatch('setTipState', this.$t('user.questions.submission'))
            this.content = ''
            this.$nextTick(() => {
              if (this.marketSide === 'exQue') {
                this.quetlaun.value = null
              }
            })
            this.imgSrc = ''
            this.mation = this.$t('user.questions.Prompt')
            this.$refs.fileInp.value = ''
            if (this.marketSide === 'otcAppeal') {
              this.$router.push({path: '/orderInfo', query: {orderId: this.sequence, side: this._P.fixUrl('side')}})
            }
          } else {
            this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
          }
          this.flag = true
        }).catch(() => {
          this.flag = true
        })
      }
    },
    // 问题类型
    tip_list () {
      this.axios({
        url: this.$store.state.url.personal.problem_tip_list,
        headers: {},
        params: {
        },
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          let optionList = data.data.rqTypeList
          let index = optionList.findIndex((item, index) => {
            return item.code === 7
          })
          optionList.splice(index, 1)
          this.quetlaun.optionList = optionList
        }
      })
    }
  }
}
</script>
